<template>
  <div id="homePage">
    <a-carousel
      effect="fade"
      autoplay
      class="home-carousel"
      :speed="1000"
      :autoplay-speed="4000"
      style="padding: 0"
    >
      <div>
        <img src="@/assets/l1.webp" />
      </div>
      <div>
        <img src="@/assets/l2.jpg" />
      </div>
      <div>
        <img src="@/assets/l3.webp" />
      </div>
      <div>
        <img src="@/assets/l4.jpeg" />
      </div>
    </a-carousel>
    <div class="home-content1">
      <div class="home-content1-title">
        <h2>TV动画</h2>
      </div>
      <div class="animation-main">
        <div
          class="animation-info"
          v-for="item in tvAnimationListData"
          :key="item.id"
        >
          <div class="animation-info-cover">
            <img :src="'http://localhost:83/' + item.cover" />
          </div>
          <h4 style="text-align: center">{{ item.name }}</h4>
          <h5 style="text-align: center; color: rgba(0, 0, 0, 0.3)">
            总{{ item.episodes }}集
          </h5>
        </div>
      </div>
    </div>
    <div class="home-content2">
      <div class="home-content2-title">
        <h2>剧场动画</h2>
      </div>
      <div class="animation-main">
        <div
          class="animation-info"
          v-for="item in movieAnimationListData"
          :key="item.id"
        >
          <div class="animation-info-cover">
            <img :src="'http://localhost:83/' + item.cover" />
          </div>
          <h4 style="text-align: center">{{ item.name }}</h4>
          <h5 style="text-align: center; color: rgba(0, 0, 0, 0.3)">
            总{{ item.episodes }}集
          </h5>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { animationList, homeAnimationList } from "@/api/animation";
import { ref } from "vue";

const tvAnimationListData = ref([]);
const movieAnimationListData = ref([]);

// animationList(1).then((res) => {
//   animationListData.value = res.data.records;
//   console.log(animationListData);
// });

homeAnimationList().then((res) => {
  tvAnimationListData.value = res.data.tvAnimations;
  movieAnimationListData.value = res.data.movieAnimations;
});
</script>

<style scoped>
#homePage .home-carousel img {
  width: 100%;
  background-size: contain;
  //background-position: center;
  //height: 150%;
}

:deep(.slick-slide) {
  //margin-top: -214px;
  text-align: center;
  //height: 630px;
  height: 730px;
  line-height: 160px;
  background: #364d79;
  //overflow: hidden;
}

#homePage .home-content1 .home-content1-title {
  text-align: left;
  margin-top: 10px;
  margin-bottom: 10px;
}

#homePage .home-content2 .home-content2-title {
  text-align: left;
  margin-top: 10px;
  margin-bottom: 10px;
}

.animation-info .animation-info-cover {
  width: 215px;
  height: 292px;
  background-color: pink;
  border-radius: 10px;
}

.animation-info {
  display: inline-block;
  width: 198px;
  height: 300px;
  margin-bottom: 50px;
}

.home-content1 {
  padding: 40px;
  margin-left: 60px;
  margin-right: 60px;
}

.home-content2 {
  //padding: 40px;
  //margin-top: 40px;
  margin-left: 100px;
  margin-right: 100px;
}

.animation-main {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#homePage {
  padding: 0;
}

.animation-info-cover img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
</style>
